<template>
  <video
    ref="videoPlayer"
    class="vjs-styles-dimensions vjs-show-big-play-button-on-pause video-js"
  ></video>
</template>

<script>
import videojs from 'video.js';
// 加载中文
import lang_zhcn from 'video.js/dist/lang/zh-CN.json';

// 使用中文
videojs.addLanguage('zh-CN', lang_zhcn);
export default {
  name: 'VideoPlayer',
  props: {
    videoSrc: {
      type: Object,
      default() {
        return {};
      },
    },
    height: {
      type: String,
      default: '500',
    },
    width: {
      type: String,
      default() {
        return '500';
      },
    },
  },
  data() {
    return {
      player: null,
      // 菜单栏配置
      videoOptions: {
        autoplay: true,
        controls: true,
        preload: 'auto',
        playbackRates: [0.2, 0.5, 1, 1.5, 2, 2.5, 3], //视频播放速度
        // aspectRatio: '16:9',//宽高比，9:16 16:9 4:3等等  设置后width和height属性无效
        // fluid: true,//自动计算宽高 ，若设置了aspectRatio，则失效
        // liveui: true,//不知
        width: this.width,
        height: this.height,
        userActions: {
          doubleClick: false, // 双击全屏 boolean|function

          // 热键
          //     hotkeys(event) {
          //         // 'x'  键 - 暂停
          //         if (event.which === 88) {
          //             this.pause();
          //         }
          //         // `y` 键 - 播放
          //         if (event.which === 89) {
          //             this.play();
          //         }
          //     },//热键
        },

        language: 'zh-CN',
        controlBar: {
          children: [
            { name: 'playToggle' }, // 播放按钮
            { name: 'currentTimeDisplay' }, // 当前已播放时间
            { name: 'progressControl' }, // 播放进度条
            { name: 'durationDisplay' }, // 总时间
            { name: 'audioTrackButton' },
            {
              // 倍数播放
              name: 'playbackRateMenuButton',
            },
            // {
            //     name: 'volumePanel', // 音量控制
            //     inline: false, // 不使用水平方式
            // },
          ],
          // PictureInPictureToggle: true,  //画中画

          // 是否显示全屏按钮
          fullscreenToggle: true,

          // 音量是否在一行上显示
          // volumePanel: {
          //     // true 同一行显示音量调整
          //     // false 竖直显示音量调整
          //     inline: false
          // },

          // 视频播放完时触发
          // true 显示回放图标
          // false 显示暂停图标
          playToggle: {
            replay: true,
          },
        },

        // 视频地址
        sources: this.videoSrc,
      },
    };
  },

  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {
      // this表示videojs实例
      // 可在这里对videosjs操作
      // console.log(this);
      //   例：创建按钮
      // const button = p.getChild('ControlBar').addChild('button', {
      //     controlText: '按钮',
      //     className: 'vjs-visible-text',
      //     clickHandler: function (event) {
      //         videojs.log('1');
      //     }
      // });
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

<style lang="scss">
//@import '~video.js/dist/video-js.min.css';
.video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
